<template>
  <box :title="title">
    <div class="h-[162px] py-[44px] pl-[34px] pr-[44px]">
      <div class="flex justify-between ">
        <div class="flex-1 ">
          <div class="flex items-center">
            <div class="w-[89px] h-[89px]">
              <img class="w-[89px] h-[89px]  p-[15px]"
                   :src="img1"
                   alt="">
            </div>
            <div>
              <div class="alltext mb-[12px]">月环比</div>
              <div class="flex  font-[500] text-[24px] text-[#fff]">
                <div >{{ isNullOrEmpty( Math.abs(number) ) }}<span class="text-[14px]">%</span></div>
                
                <div class="w-[11px] h-[14px] ml-[10px]">
                  <img v-if="number >= 0" class="w-[11px] h-[14px]"
                       :src="img3"
                       alt="">
                       <img v-if="number < 0" class="w-[11px] h-[14px]"
                       :src="img4"
                       alt="">
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="flex-none h-full ">
          <el-divider style="border-left: 1px solid #383C50;" direction="vertical" class="!h-[82px] !my-0   "/>
        </div>

        <div class="flex-1 ">
          <div class="flex items-center">
            <div class="w-[89px] h-[89px]">
              <img class="w-[89px] h-[89px] p-[15px]"
                   :src="img2"
                   alt="">
            </div>
            <div>
              <div class="alltext mb-[12px]">年同比</div>
              <div class="flex  font-[500] text-[24px] text-[#fff]">
                <div >{{ isNullOrEmpty( Math.abs(numbers) ) }}<span class="text-[14px]">%</span></div>
                
                <div class="w-[11px] h-[14px] ml-[10px]">
                  <img v-if="numbers >= 0" class="w-[11px] h-[14px]"
                       :src="img3"
                       alt="">
                       <img v-if="numbers < 0" class="w-[11px] h-[14px]"
                       :src="img4"
                       alt="">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </box>
</template>
<script lang="ts" setup>
import { isNullOrEmpty } from '@/utils/functions'
import {screenworkorder} from '@/api/screen/largeData'
import box from '@/views/large-data-screen/component/box.vue'
import img1 from '@/assets/screenimg/data9.png'
import img2 from '@/assets/screenimg/data10.png'
import img3 from '@/assets/screenimg/data11.png'
import img4 from '@/assets/screenimg/data12.png'

const title = ref('环比统计')
const numbers = ref(99999)
const number = ref(0)


onMounted(() => {
  getscreeninspect()
})
//获取巡检
const getscreeninspect = () => {
  screenworkorder({
    workOrderDT: 0,//工单处理日期类型 （0-全部 1 日 2周 3 月 4 年）
    workOrderTypeDT: 0 //工单类型统计日期类型  （0-全部   3 月 5 上月）

  }).then(res => {
    number.value = res.result.years.monthCircle
    numbers.value = res.result.years.yearOyear
  })
}
</script>
<style lang="scss" scoped></style>
